<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			/* 浮动属性 floot:left right none */
			/* 清除属性 clear:lest right both */
			div{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				float: left;
			}
			#d1{
				background-color: #cbc9ff;
			}
			#d3{
				background: #cbc9ff;
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 页面排版：左右形式 --浮动 元素变成块 飘，父级左右点 -->
		<div id="d1">1</div>
		<div id="d1">2</div>
		<div id="d3">3</div>
		<div id="d1">4</div>
	</body>
</html>